Pull Request Overview

This PR converts the existing modal implementation to use Material-UI's Modal component with proper open/close behavior. The changes enable users to close the modal via the Escape key, Close button, or by clicking outside the modal box.

Key Changes:

• Replaced the basic <div> modal structure with MUI's Modal and Box components
• Added state management for modal open/close behavior using useEffect and useState
• Integrated handleClose function to properly clean up state when the modal is closed

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Great work! Thanks for your patience while I reviewed this.

Question (non-blocking): Was there a reason you removed ARIA attributes?

Suggestion (non-blocking): You can simplify this component by removing both the useEffect and the open state. Currently, the open state syncs with the selectedEvent state, so we’re maintaining two states that represent the same piece of information. Instead of duplicating state, we can derive it. useEffect is also not necessary, because React will automatically re-render when selectedEvent changes.

Current approach:

const [open, setOpen] = useState(false);

useEffect(() => {
  if (selectedEvent) { setOpen(true); }
  else { setOpen(false); }
}, [selectedEvent]);

Suggested approach (derived state):

const open = Boolean(selectedEvent);

open is now derived from selectedEvent and the useEffect can be removed entirely.

Your modal would stay the same:

<Modal open={open} onClose={handleClose}>

To close it, you only need to reset selectedEvent, so handleClose() would just be:

function handleClose() {
  setFormErrors(null);
  setSelectedEvent(null);
}

When selectedEvent becomes null, the component re-renders, open becomes false, and the modal closes. This avoids duplicated state and follows React best practices around deriving state instead of duplicating state.